<template>
  <div id="search" class="container">
    <!-- 搜索框 -->
    <el-form :inline="true" class="demo-form-inline" style="margin-top: 10px;">
      <el-form-item>
        <el-input
          type="text"
          size="small"
          maxlength="20"
          v-model="searchBody.content"
          placeholder="请输入订单名称"
          class="input-style"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          style="background-color: #633e29; color: white; border-radius: 5px;"
          @click="searchOrder"
          class="search-button"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 分类标签 -->
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs-style">
      <el-tab-pane label="分类" name="0"></el-tab-pane>
      <el-tab-pane
        v-for="item in labels"
        :label="item.categoryName"
        :key="item.id"
        :name="item.id"
        class="category-tab"
      ></el-tab-pane>
    </el-tabs>

    <!-- 订单列表 -->
    <div id="orders" class="order-list">
      <div class="order-card-container">
        <div
          v-for="item in orderInfos"
          :key="item.id"
          class="order-card"
        >
          <div class="order-card-header">
            <i class="el-icon-s-cooperation" style="color: #f4ece2"></i>
            <!-- 订单标题：只显示一行，鼠标悬浮时显示完整 -->
            <span class="order-title" :title="item.orderMain">{{ item.orderMain }}</span>
          </div>
          <div class="order-card-body">
            <p class="order-desc" :title="item.orderDesc">{{ item.orderDesc }}</p>
            <div class="order-price">报价：{{ item.orderPrice }}￥</div>
            <div class="order-time">发布时间：{{ item.beginTime }}</div>
          </div>
          <div class="order-card-footer">
            <el-button @click="acceptOrder(item.id)" type="warning" class="accept-btn">接单</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrdersInfo",
  data() {
    return {
      searchBody: {
        content: "",
      },
      orderInfos: [
        {
          id: "",
          orderMain: "",
          orderDesc: "",
          orderPrice: "",
          beginTime: "",
        },
      ],
      activeName: "0",
      labels: [
        {
          id: "",
          categoryName: "",
        },
      ],
      res: {
        message: "",
        code: "",
        data: "",
      },
      resO: {
        message: "",
        code: "",
        data: "",
      },
      resA: {
        message: "",
        code: "",
        data: "",
      },
    };
  },
  created() {
    this.queryCategory();
    this.queryOrder();
  },
  methods: {
    queryCategory() {
      this.$axios
        .get("/category/get")
        .then((response) => {
          this.res = response.data;
          this.labels = this.res.data;
        })
        .catch((response) => {
          console.log(response);
        });
    },
    queryOrder() {
      this.$axios
        .get("/order/get")
        .then((response) => {
          this.resO = response.data;
          this.orderInfos = this.resO.data;
        })
        .catch((response) => {
          console.log(response);
        });
    },
    queryOrderByCategoryId(id) {
      this.$axios
        .get("order/getByCid/" + id)
        .then((response) => {
          this.resO = response.data;
          this.orderInfos = this.resO.data;
        })
        .catch((response) => {
          console.log(response);
        });
    },
    handleClick(tab) {
      if (tab.name == null) {
        this.queryOrder();
      }
      this.queryOrderByCategoryId(tab.name);
    },
    searchOrder() {
      if (this.searchBody.content == "") {
        this.$message.error("请先输入");
        return;
      }
      this.$axios
        .post("/order/search", JSON.stringify(this.searchBody))
        .then((response) => {
          this.resO = response.data;
          this.orderInfos = this.resO.data;
          if (this.resO.code != "200") {
            this.$message.error(this.resO.message);
          }
        });
    },
    acceptOrder(id) {
      this.$axios
        .put("/order/accept/" + id)
        .then((response) => {
          this.resA = response.data;
          if (this.resA.code == "200") {
            this.$message.success(this.resA.message);
            this.queryOrder();
          } else {
            this.$message.error(this.resA.message);
          }
        });
    },
  },
};
</script>

<style scoped>
/* 页面整体布局 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-button {
  margin-left: 10px;
  border-radius: 5px;
}

.input-style {
  width: 300px;
}

.tabs-style {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 分类标签 */
.category-tab {
  font-size: 16px;
}

/* 订单卡片样式 */
.order-list {
  margin-top: 30px;
}

.order-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.order-card {
  background: linear-gradient(145deg, #f7f7f7, #e3e3e3);
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.order-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.order-card-header {
  background-color: #636161;
  color: white;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.order-card-header .order-title {
  margin-left: 10px;
  display: inline-block;
  width: calc(100% - 40px);
  white-space: nowrap; /* 限制文字为一行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 文字溢出时显示省略号 */
}

.order-card-body {
  padding: 15px;
  color: #333;
  font-size: 14px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.order-card-body p {
  margin: 10px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}

.order-card-body p:hover {
  white-space: normal;
  overflow: visible;
}

.order-price, .order-time {
  font-size: 14px;
  color: #666;
}

.order-card-footer {
  padding: 15px;
  text-align: right;
  background-color: #f3f6f9;
}

.accept-btn {

  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
}

.accept-btn:hover {
  background-color: #633e29;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .container {
    padding: 15px;
  }

  .input-style {
    width: 100%;
  }
}
</style>
